
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=0.5, minimum-scale=0.2, maximum-scale=1.0, user-scalable=yes" />

  <meta name="apple-touch-fullscreen" content="NO" />
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="application-name" content="舞墨间,艺无境" />
  <meta name="description" content="芦笛 - 舞墨，舞墨间,艺无境，舞动的墨迹，静谧的艺术殿堂。" />
  <meta name="author" content="芦笛" />
  <meta property="og:image" content="./img/logo.png">
  <title>舞墨 wumo.com.cn | 舞墨间,艺无境</title>
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="./iscroll-probe.js"></script>
</head>

<body>
  <div class="head" id="head">
    <div class="logo">
      <img src="./img/index_logo.png" alt="">
    </div>
    <div class="menu">
      <div class="menu-item" onclick="go('about')">
        <span class="menu-item-ch">琴棋书画</span>
        <span class="menu-item-en">WuMo Stu.</span>
      </div>
      <div class="menu-item" onclick="go('news')">
        <span class="menu-item-ch">迪卓依思</span>
        <span class="menu-item-en">Information</span>
      </div>
      <div class="menu-item" onclick="go('join')">
        <span class="menu-item-ch">延揽英杰</span>
        <span class="menu-item-en">JOIN US</span>
      </div>
    </div>
  </div>
  <div id="wrapper">
    <div d="scroller">
      <div id="fullpage">
        <div class="section">
          <img class="bg-img" src="./img/HeroIMG.png" alt="" />
        </div>
        <div class="section section-about" id="about">
          <div class="page">
            <div class="infos">
              <div class="card card1">
                <div class="card-inner">
                  <span class="card-title">琴</span>
                  <span class="card-sub-title">Ancient Chinese Zither</span>
                  <span
                    class="content">
                    琴之韵律<br>
                    于舞墨艺术工作室的幽静一隅，古琴的弦线轻触着时光的脉络，奏响了远古的低吟。每一根弦，都承载着千年的智慧与情感，每一次拨动，都是心灵与自然的对话。在这里，琴声不仅是音符的跳跃，更是灵魂的触碰，它穿越历史的长廊，引领我们探索内心的宁静与宇宙的奥秘。学习古琴，不仅是技艺的磨砺，更是精神的洗礼，让每一个音符都成为连接过去与未来的桥梁，唤醒心中那份久违的诗意与哲思。
                  </span>
                </div>
              </div>
              <div class="card card2">
                <div class="card-inner">
                  <span class="card-title">棋</span>
                  <span class="card-sub-title">The Game of Go</span>
                  <span class="content">
                    棋之智谋<br>
                    在这方寸之地，黑白两色演绎着无尽的智慧与策略。围棋，如同一场无声的战争，在纹枰之上展开。每一颗棋子的落定，都考验着玩家的洞察力与决断力。舞墨艺术工作室的棋艺课程，旨在培养学员的逻辑思维与大局观，让人在对弈中学会耐心与深思熟虑。棋盘上的每一步，都映射出人生的抉择与挑战，引导我们在纷繁复杂的世界中寻找到属于自己的平衡点，体验到超越胜负的哲学之美。
                  </span>
                </div>
              </div>
              <div class="card card3">
                <div class="card-inner">
                  <span class="card-title">书</span>
                  <span class="card-sub-title">Chinese Calligraphy</span>
                  <span class="content">
                    书之风骨<br>
                    笔尖轻触宣纸，一股力量自指尖流淌而出，化作行云流水般的文字。舞墨艺术工作室的书法课程，致力于传承中华文化的精髓，通过毛笔与墨水的艺术，展现汉字的无穷魅力。在这里，每一次挥毫都是一次内心的独白，每一幅作品都是个性与情感的凝结。书法不仅是一种技能，更是一种修行，让我们在笔墨之间领悟到生命的韵律与节奏，感受到时间的沉淀与文化的厚重。
                  </span>
                </div>
                </span>
              </div>
              <div class="card card4">
                <div class="card-inner">
                  <span class="card-title">画</span>
                  <span class="card-sub-title">Chinese Painting</span>
                  <span class="content">
                    画之意境<br>
                    水墨在宣纸上缓缓蔓延，勾勒出山川的雄伟与花鸟的灵动。舞墨艺术工作室的国画教学，带领我们步入一个充满诗意与想象的世界。在这里，每一笔都蕴含着画家的情感与思考，每一幅画都是一段故事的开始。国画不仅仅是在描绘景物，更是在表达心境，让人在创作与欣赏中体验到与自然的和谐共生，感悟到生命的意义与宇宙的广阔。在舞墨，每一幅画作都是一扇窗，通往一个充满灵性与美感的东方世界。
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section section-news" id="news">
          <div class="page">
            <h1 class="title">迪卓依思</h1>
            <h3 class="sub-title">Information</h3>
            <ul class="news">
              <li class="cut-line"/>
              <li class="news-one">
                <div class="news-line" style="cursor: pointer;" onclick="showNews(0)">
                  <div class="line-left">
                    <span class="title">关于舞墨艺术工作室</span>
                    <span>2024年7月9日08:16:12</span>
                  </div>
                  <div class="line-right">
                    <img src="./img/icon_arrow_off.svg" alt="" style="display: block;">
                    <img src="./img/icon_arrow_on.svg" alt="" style="display: none;">
                  </div>
                </div>
                <div class="news-line">
                  <span class="news-value" style="display: none;">
                    <p>
                      在繁华世界的喧嚣背后，有一片净土，静候着每一位追求艺术真谛的灵魂——舞墨艺术工作室。这里，是古典与现代交融的圣地，是琴棋书画四大雅趣汇聚的殿堂。踏入舞墨，仿佛穿越时空，来到一个充满诗意与灵性的艺术世界，每一寸空间都流淌着文化的韵律，每一抹色彩都诉说着历史的故事。
                    </p>
                    <p>
                      舞墨，不仅仅是一个工作室的名字，它是艺术的温床，是灵感的源泉。在这里，古琴的悠扬旋律轻轻拂过心湖，激起层层涟漪；棋盘上黑白交织，演绎着智慧与策略的博弈；毛笔在宣纸上留下遒劲有力的痕迹，每一划都凝聚着书法家的气魄与风骨；而国画，则以其独特的意境，将山川的壮丽、花鸟的生机，一一呈现在世人面前，令人叹为观止。
                    </p>
                    <p>
                      加入舞墨，就是踏上一段心灵之旅，它将带你领略艺术的魅力，感受文化的深度，激发内在的创造力。在这里，每个人都可以成为自己心中的艺术家，用笔墨书写人生，用色彩绘出梦想。舞墨艺术工作室，期待着每一个热爱生活、追求美好的你，一同探索艺术的无限可能，共同编织属于我们的美好篇章。
                    </p>
                    <p>
                      让我们相约舞墨，让心灵与艺术共舞，让梦想与墨香齐飞。在这个充满创意与激情的空间里，你将发现，艺术不仅仅是视觉的享受，更是心灵的滋养，是生活中不可或缺的诗与远方。
                    </p>
                    <p style="text-align: right;text-decoration: underline;">
                      <a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAATkd6lXDV2YwUM8qkYi4axvcisfhWmnP0CYY_hJS3Sc0/?tab=all" target="_blank">查看头条号>></a>&nbsp;&nbsp;
                      <a href="https://www.ximalaya.com/zhubo/14337771" target="_blank">查看喜马拉雅>></a>
                    </p>
                  </span>
                </div>
              </li>
              <li class="cut-line"/>
              <!-- <li class="news-one">
                <div class="news-line" style="cursor: pointer;" onclick="showNews(1)">
                  <div class="line-left">
                    <span class="title">。。。</span>
                    <span>时间</span>
                  </div>
                  <div class="line-right">
                    <img src="./img/icon_arrow_off.svg" alt="" style="display: block;">
                    <img src="./img/icon_arrow_on.svg" alt="" style="display: none;">
                  </div>
                </div>
                <div class="news-line">
                  <span class="news-value" style="display: none;">
                    <p>
                      。。。
                    </p>
                    <p>
                      。。。
                    </p>
                    <p style="text-align: right;text-decoration: underline;">
                      <a href="https://www.zhihu.com/people/cdipress" target="_blank">查看知乎号</a>
                    </p>
                  </span>
                </div>
              </li>
              <li class="cut-line"/>
              <li class="news-one">
                <div class="news-line" style="cursor: pointer;" onclick="showNews(2)">
                  <div class="line-left">
                    <span class="title">。。。</span>
                    <span>时间</span>
                  </div>
                  <div class="line-right">
                    <img src="./img/icon_arrow_off.svg" alt="" style="display: block;">
                    <img src="./img/icon_arrow_on.svg" alt="" style="display: none;">
                  </div>
                </div>
                <div class="news-line">
                  <span class="news-value" style="display: none;">
                    <p>
                      。。。
                    </p>
                    <p>
                      。。。
                    </p>
                    <p style="text-align: right;text-decoration: underline;">
                      <a href="https://weibo.com/339000616" target="_blank">查看微博</a>
                    </p>
                  </span>
                </div>
              </li>
              <li class="cut-line"/>
              <li class="news-one">
                <div class="news-line" style="cursor: pointer;" onclick="showNews(3)">
                  <div class="line-left">
                    <span class="title">。。。</span>
                    <span>时间</span>
                  </div>
                  <div class="line-right">
                    <img src="./img/icon_arrow_off.svg" alt="" style="display: block;">
                    <img src="./img/icon_arrow_on.svg" alt="" style="display: none;">
                  </div>
                </div>
                <div class="news-line">
                  <span class="news-value" style="display: none;">
                    <p>
                      。。。
                    </p>
                    <p>
                      。。。
                    </p>
                    <p style="text-align: right;text-decoration: underline;">
                      <a href="https://weibo.com/339000616" target="_blank">查看喜马拉雅</a>
                    </p>
                  </span>
                </div>
              </li>
              <li class="cut-line"/> -->
            </ul>
          </div>
        </div>
        <div class="section section-join" id="join">
          <div class="join">
            <h1 class="title">延揽英杰</h1>
            <h3 class="sub-title">JOIN US</h3>
            <div class="input-div">
              <span>简历请发送至&nbsp;&nbsp;</span>
              <span style="cursor: pointer;" onclick="copyText('job@wumo.com.cn')">cooperate@wumo.com.cn</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="logo"> <img src="./img/index_logo.png" alt=""></div>
        <span class="introduce">舞动的墨迹，静谧的艺术殿堂。</span>
        <div class="bd" style="cursor: pointer;" onclick="copyText('BD@wumo.com.cn')">
          商务合作：BD@wumo.com.cn
        </div>
        <span class="address">
          北京市丰台区汽车博物馆西路9号院4号楼6层419号 &nbsp;&nbsp;&nbsp;010-59116419&nbsp;&#8362;&nbsp;139-1193-2290
        </span>
      </div>
      <div class="footer">
        © 舞墨&nbsp;
        <span id="time-range"></span>
        &nbsp;&nbsp;迪卓依思（北京）文化发展有限公司&nbsp;<a href="#"> </a> 
        <!-- <a href="#">《隐私指引》</a> -->
      </div>
      <div>
        
      </div>
    </div>
  </div>
  <div class="icon" id="icon" style="display: block;">
    <img src="./icon/icon_arrow.svg" alt="">
  </div>
</body>
<script type="text/javascript">
    console.log('欢迎加入我们。请发个人简历至邮箱 cooperate@wumo.com.cn  艺术让生活更有品味！')
  let myscroll
  function init() {
    window.onload = () => {
      const height = document.body.clientHeight
      const pages = document.getElementsByClassName('section')
      Array.from(pages).forEach((el, i) => {
        if (i > 0) return
        el.style.minHeight = height + 'px'
      })

      myscroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true, click: false,scrollbars: false,fixedScrollbar:false});
      myscroll.on('scroll', handleScroll);
    }
  }
  function handleScroll(){
    const height = document.body.clientHeight
    const y = Math.abs(this.y)
    const icon = document.getElementById("icon")
    const head = document.getElementById("head")
    const maxOpacity = 0.6
    const maxSaturate = 180
    const minSaturate = 100
    const opacity = Math.min((y/height)*maxOpacity,maxOpacity)
    const saturate = Math.min(((y/height)*(maxSaturate-minSaturate)+minSaturate),maxSaturate)
    icon.style.display = y > 0 ?'none':'block'
    const opacityValue =  Math.floor(opacity * 10) / 10
    head.style.backgroundColor = 'rgba(0,0,0,'+opacityValue+')'
    
    const saturateValue = Math.floor(saturate)
    head.style.backdropFilter = 'saturate('+saturateValue+'%) blur(20px)'
    head.style['-webkit-backdrop-filter']  = 'saturate('+saturateValue+'%) blur(20px)'

  };
  init();
  function isPassive() {
    var supportsPassiveOption = false;
    try {
      addEventListener("test", null, Object.defineProperty({}, 'passive', {
        get: function () {
          supportsPassiveOption = true;
        }
      }));
    } catch (e) { }
    return supportsPassiveOption;
  }
  function go(id) {
    const dom = document.getElementById(id);
    myscroll.scrollToElement(dom, 500, true, true)
  }
  function showNews(index) {
    const news = document.getElementsByClassName('news-value')
    let openFlag = false
    Array.from(news).forEach((el, i) => {
      if (i !== index) {
        setTimeout(()=> {el.style.display = 'none'},300)
      } else {
        openFlag = el.style.display === 'none'
        el.style.display === 'none' ? el.style.display = 'block' : setTimeout(()=> {el.style.display = 'none'},300)
        
        
      }
    })
    const icons = document.getElementsByClassName('line-right')
    Array.from(icons).forEach((el, i) => {
      if (i !== index) {
        el.children[0].style.display = 'block'
        el.children[1].style.display = 'none'
      } else {
        el.children[0].style.display = openFlag ? 'none' : 'block'
        el.children[1].style.display = openFlag ? 'block' : 'none'
      }
    })

    const newsList = document.getElementsByClassName('news-one')
    Array.from(newsList).forEach((el, i) => {
      if (i === index && el.className.indexOf('news-active')===-1) {
        el.classList.add('news-active')
      } else {
        el.classList.remove('news-active')
      }
    })
    setTimeout(() => {
      myscroll.refresh();
    }, 500);
  }
  // 复制的方法
  function copyText(text){ // text: 要复制的内容， callback: 回调
      var tag = document.createElement('input');
      tag.setAttribute('id', 'cp_hgz_input');
      tag.value = text;
      document.getElementsByTagName('body')[0].appendChild(tag);
      document.getElementById('cp_hgz_input').select();
      document.execCommand('copy');
      document.getElementById('cp_hgz_input').remove();
  }
  // 页脚年份
  (function(){
    const currentYear = new Date().getFullYear();
    document.getElementById('time-range').innerText=`2014-${currentYear}`
  })();
</script>

</html>